<script setup lang="ts"></script>

<template>
 <div>
    <div class="w-full h-80 flex flex-col text-center pl-3.5">
      <!-- 头部 -->
      <div class="flex justify-between py-3 pb-4">
        <div class="font-bold text-sm">最近上传</div>
        <div class="flex">
          <img class="w-6" src="/src/assets/yunshangchuan.svg" alt="" />
          <div class="flex px-8 w-64">
            <img class="w-6" src="/src/assets/sousuo.svg" alt="" />
            <div class="flex">
              <div>搜索任何东西...</div>
              <div>Ctrl+K</div>
            </div>
          </div>
          <img class="w-4 mx-2.5" src="/src/assets/tianjiahaoyou.svg" alt="" />
          <img class="w-4 mx-2.5" src="/src/assets/chaolianjie.svg" alt="" />
          <img class="w-4 mx-2.5" src="/src/assets/yidong.svg" alt="" />
          <img class="w-4 mr-8" src="/src/assets/shanchu.svg" alt="" />
          <img
            class="w-4 mx-2.5"
            src="/src/assets/zhankaicebianlan.svg"
            alt=""
          />
          <img class="w-4 mx-2.5" src="/src/assets/tishi.svg" alt="" />
        </div>
      </div>
      <!-- 内容 -->
      <div class="flex-1 flex justify-between">
        <!-- 文件 -->
        <div class="flex flex-col items-start">
          <div class="py-3 flex">
            <img class="w-14 rounded-md" src="/src/assets/wenjian.svg" alt="" />
            <div class="pl-3.5 flex flex-col items-start">
              <div class="font-bold">新建文件夹</div>
              <div class="text-sm text-current">
                <span>空的,</span><span>2024.1.17 11:40</span>
              </div>
            </div>
          </div>
          <div class="py-3 flex">
            <img class="w-14 rounded-md" src="/src/assets/wenjian.svg" alt="" />
            <div class="pl-3.5 flex flex-col items-start">
              <div class="font-bold">新建文件夹</div>
              <div class="text-sm text-current">
                <span>空的,</span><span>2024.1.17 11:40</span>
              </div>
            </div>
          </div>
          <div class="py-3 flex">
            <img
              class="w-14 rounded-md"
              src="/src/assets/vuefilemanager-screenshot-dark.png"
              alt=""
            />
            <div class="pl-3.5 flex flex-col items-start">
              <div class="font-bold">IMG.jpg</div>
              <div class="text-sm text-current">
                <span>2.08kB</span><span>2024.1.17 11:40</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 详情 -->
        <div class="w-80 p-2 font-bold">
          <!-- 图片 -->
          <!-- <div class="w-70 ">
              <img
                class="rounded-md mb-6 shadow-sm"
                src="/src/assets/setting/logo.jpg"
                alt=""
              />

            <div class="flex pb-2">
              <img class="w-7 pr-1.5" src="/src/assets/tupian.svg" alt="" />
              <div>祈祷.png</div>
            </div>

            <div class="flex flex-col items-start pb-2">
              <p>大小</p>
              <div>2.15MB</div>
            </div>
            <div class="flex flex-col items-start pb-2">
              <p>创建于</p>
              <div>2024年1月17 11:40</div>
            </div>
            <div class="flex flex-col items-start pb-2">
              <p>在哪里</p>
              <div class="flex"><div class="mr-3">132</div><img class="w-4" src="/src/assets/xiugai.svg" alt=""></div>
            </div>
          </div> -->
          <!-- 文件夹 -->
          <!-- <div class="w-70 ">
            <div class="flex pb-2">
              <img class="w-7 pr-1.5" src="/src/assets/wenjianjia.svg" alt="" />
              <div>新建文件夹</div>
            </div>

            <div class="flex flex-col items-start pb-2">
              <p>创建于</p>
              <div>2024年1月17 11:40</div>
            </div>
            <div class="flex flex-col items-start pb-2">
              <p>在哪里</p>
              <div class="flex"><div class="mr-3">132</div><img class="w-4" src="/src/assets/xiugai.svg" alt=""></div>
            </div>
          </div> -->
          <!-- 文件 -->
          <!-- <div class="w-70 ">
            <div class="flex pb-2">
              <img class="w-7 pr-1.5" src="/src/assets/wenjian(1).svg" alt="" />
              <div>123123.txt</div>
            </div>
            <div class="flex flex-col items-start pb-2">
              <p>大小</p>
              <div>2.15MB</div>
            </div>

            <div class="flex flex-col items-start pb-2">
              <p>创建于</p>
              <div>2024年1月17 11:40</div>
            </div>
            <div class="flex flex-col items-start pb-2">
              <p>在哪里</p>
              <div class="flex"><div class="mr-3">132</div><img class="w-4" src="/src/assets/xiugai.svg" alt=""></div>
            </div>
          </div> -->
          <!-- 没点击 -->
          <div class="w-70 flex flex-col justify-center items-center">
            <img class="w-6" src="/src/assets/in_biyan.svg" alt="" />
            <div>没有什么可以预览的。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
